﻿@model Website
@using (Html.BeginForm())
{
    <dl class="form">
        <dt>
            @Html.LabelFor(m => m.Identifier)
        </dt>
        <dd>
            @Html.TextBoxFor(m => m.Identifier)
            @Html.ValidationMessageFor(m => m.Identifier)
        </dd>
        <dt>
            @Html.LabelFor(m => m.Name)
        </dt>
        <dd>
            @Html.TextBoxFor(m => m.Name)
            @Html.ValidationMessageFor(m => m.Name)
        </dd>
        <dt>
            @Html.LabelFor(m => m.Hosts)
        </dt>
        <dd class="hosts">
            @Html.ValidationMessageFor(m => m.Hosts)
            <ul>
                @{
       var hosts = Model.GetHosts();
       if (hosts.Count > 0)
       {
           foreach (var host in hosts)
           {
                    <li>
                        <input type="text" name="Host" value="@host"/><a href="javascript://" class="remove"></a></li>
           }
       }
       else
       {
                    <li>
                        <input type="text" name="Host" /><a href="javascript://" class="remove"></a></li>
       }
                }
            </ul>
            <span class="tips">@Html.Raw("You can add more than one host to access you website.<br/>For example,www.demo.com or www.demo.com/subsite".Localize())</span><a
                href="javascript://" class="add">[+]</a>
            @Html.HiddenFor(m => m.Hosts)
        </dd>
        <dt>
            @Html.LabelFor(m => m.IsOnline)
            @Html.CheckBoxFor(m => m.IsOnline)
        </dt>
        <dd>
            @Html.HiddenFor(m => m.Id)
            <button type="submit">@("Save".Localize())</button>
        </dd>
    </dl>
}
<script type="text/javascript">
    $(document).ready(function () {
        $('.hosts .add').click(function () {
            $(this).siblings('ul').append('<li><input type="text" name="Host" /><a href="javascript://" class="remove"></a></li>');

        });
        $('.hosts .remove').live('click', function () {
            if ($('.hosts ul li').length > 1) {
                $(this).parent('li').remove();
            }
            getHostJson();
        });

        $('input[type=text][name=Host]').live('keyup', function () {
            getHostJson();
        });

        function getHostJson() {
            var list = new Array();
            $('input[type=text][name=Host]').each(function () {
                if ($(this).val() != '') {
                    list.push($(this).val());
                }
            });

            if (list.length > 0) {
                $('input[type=hidden][name=Hosts]').val(JSON.stringify(list));
            } else {
                $('input[type=hidden][name=Hosts]').val('');
            }
        }
    });
</script>
